﻿<style>
    .ttTranslator {
        max-width: 800px !important;
    }

    #qtip-ttTranslator-content {
        padding: 0;
    }

    #frameTranslator {
        border: 0;
    }
</style>

<script type="text/javascript">
    var translatorManager = new function () {
        var ttTranslator = null;
        var destLang = "en", myLang = "fr";

        this.init = function (destLanguage, myLanguage, inputVisible) {
            //dest.lang + me.lang
            destLang = destLanguage;
            myLang = myLanguage;
            if (!inputVisible)
                $("#translatorInput").hide();
            $("#dicText").keypress(translatorManager.keySearch);
        };

        this.setLanguage = function (destLanguage) {
            destLang = destLanguage;
        };

        this.onAfterLog = null;

        this.showTranslator = function () {
            var text = $("#dicText").val();

            translatorManager.showTranslatorFrame(text);

            // log request
            $.ajax({
                type: "POST",
                url: "/Talk/AddTranslation",
                contentType: "application/json; charset=utf-8",
                data: "{'idLang':\"" + destLang + "\", 'search':" + JSON.stringify(text) + "}",
                dataType: "json",
                success: function (result) {
                    if (translatorManager.onAfterLog != null)
                        translatorManager.onAfterLog();
                },
                error: function (result) {
                    debugger;
                }
            });
        };

        this.showTranslatorFrame = function (text) {
            // load wordreference frame 
            var langs = destLang + myLang;
            if (langs == "frfr")
                langs = "fren";
            var url = "http://www.wordreference.com/" + langs + "/" + text; // TODO url encode 
            //console.log(url);
            if (ttTranslator == null) {
                ttTranslator = $("<div />").qtip({
                    id: "ttTranslator",
                    content: { text: "<iframe id='frameTranslator' src=\"" + url + "\" width=725 height=500></iframe>", title: { text: "@Resources.Intercamber.Discussion_DictionnaryFrameTitle", button: true } },
                    position: { my: 'center', at: 'center', target: $(window), viewport: $(window), adjust: { method: "shift", x: 0, y: 0 }, effect: false },
                    hide: 'unfocus',
                    style: { classes: "qtip-bootstrap qtip-shadow ttTranslator", width: 725, height: 522, },
                    events: {
                        show: function () {
                            $(this).draggable();
                        }
                    }
                }).qtip("show");
            } else {
                $("#frameTranslator").attr('src', url);
                ttTranslator.qtip("show");
            }
        };

        this.keySearch = function (e) {
            if (e.keyCode == 13) {
                if ($('#cbEnter').attr('checked')) {
                    translatorManager.showTranslator();
                    return false;
                }
            }
            return true;
        };
    };
</script>

<span style="margin-top: 10px;" id="translatorInput">
    <nobr>
        <input type="text" id="dicText" style="width: 150px;" onfocus="$(this).select()" />
        <button class="jqbutton" onclick=" translatorManager.showTranslator() ">@Resources.Intercamber.Search</button>
    </nobr>
</span>
